<template>
  <div>
    <h2>{{ state }}</h2>
    <h2>{{ user }}</h2>
    <button @click="handleToRaw">toRaw</button>
    <button @click="handleMarkRaw">markRaw</button>
  </div>
</template>

<script setup lang="ts">
import { markRaw, reactive, toRaw } from 'vue';

interface User {
  name: string,
  car: any,
  arr?: any
}
const state: User = reactive({
  name: "孙悟空",
  car: {
    name: '筋斗云'
  },

})

// toRaw 把代理对象变成普通对象 没有响应式
let user = toRaw(state)

function handleToRaw() {
  user.name = '猪八戒'
  console.log(user)
}

const arr = [1, 2, 3, 4]
function handleMarkRaw() {
  user.name = '猪八戒'
  // 被markRaw标记的属性不会再次被标记成响应式 代理对象
  state.arr = markRaw(arr)
  // 数据发送变化 页面不同步
  setInterval(() => {
    if (state.arr) {
      state.arr[0] += 'sun'
      console.log(state.arr)
    }
  }, 1000)
}
</script>

<style scoped></style>